<template>
  <div class="exam-home-container">
    <!-- 顶部导航 -->
    <div class="header-section">
      <div class="header-content">
        <el-button type="text" @click="$router.push('/home/learning')" class="back-btn">
          <i class="el-icon-arrow-left"></i>
          返回学习中心
        </el-button>
        <h2 class="page-title">在线测试</h2>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 随机测试栏目 -->
      <div class="test-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="el-icon-magic-stick"></i>
            随机测试
          </h3>
          <p class="section-desc">根据科目和知识点自定义生成测试题目</p>
        </div>

        <div class="random-test-content">
          <el-form 
            :model="randomTestForm" 
            :rules="randomTestRules"
            ref="randomTestFormRef"
            label-width="100px"
            class="test-form"
          >
            <div class="form-row">
              <el-form-item label="选择科目" prop="courseId" class="course-select">
                <el-select 
                  v-model="randomTestForm.courseId" 
                  placeholder="请选择科目"
                  @change="onCourseChange"
                  class="full-width"
                >
                  <el-option
                    v-for="course in courses"
                    :key="course.courseId"
                    :label="course.course_name"
                    :value="course.courseId">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="题目数量" prop="questionCount" class="count-select">
                <el-select 
                  v-model="randomTestForm.questionCount" 
                  placeholder="选择题目数量"
                  class="full-width"
                >
                  <el-option label="10题" :value="10"></el-option>
                  <el-option label="20题" :value="20"></el-option>
                  <el-option label="30题" :value="30"></el-option>
                  <el-option label="50题" :value="50"></el-option>
                </el-select>
              </el-form-item>
            </div>

            <el-form-item label="知识点选择" prop="knowledgePoints" class="knowledge-select">
              <div class="knowledge-selection">
                <div class="selection-mode">
                  <el-radio-group v-model="randomTestForm.selectionMode" @change="onSelectionModeChange">
                    <el-radio label="all">全部知识点</el-radio>
                    <el-radio label="custom">自定义选择</el-radio>
                  </el-radio-group>
                </div>

                <!-- 自定义穿梭框组件 -->
                <div v-if="randomTestForm.selectionMode === 'custom'" class="custom-knowledge-selection">
                  <div class="custom-transfer">
                    <!-- 左侧面板 -->
                    <div class="transfer-panel">
                      <div class="panel-header">
                        <label class="checkbox-wrapper">
                          <input 
                            type="checkbox" 
                            :checked="leftCheckedAll"
                            @change="handleLeftCheckAll"
                          />
                          <span class="checkmark"></span>
                          可选知识点 ({{ availablePoints.length }})
                        </label>
                        <div class="search-box">
                          <i class="el-icon-search"></i>
                          <input 
                            type="text" 
                            v-model="leftSearch" 
                            placeholder="搜索知识点..."
                            class="search-input"
                          />
                        </div>
                      </div>
                      <div class="panel-body">
                        <div 
                          v-for="point in filteredAvailablePoints" 
                          :key="point.key"
                          class="transfer-item"
                          :class="{ 'checked': leftCheckedKeys.includes(point.key) }"
                        >
                          <label class="checkbox-wrapper">
                            <input 
                              type="checkbox" 
                              :value="point.key"
                              :checked="leftCheckedKeys.includes(point.key)"
                              @change="handleLeftItemCheck(point.key, $event.target.checked)"
                            />
                            <span class="checkmark"></span>
                            {{ point.label }}
                          </label>
                        </div>
                        <div v-if="filteredAvailablePoints.length === 0" class="empty-text">
                          暂无数据
                        </div>
                      </div>
                    </div>

                    <!-- 中间按钮 -->
                    <div class="transfer-buttons">
                      <button 
                        class="transfer-btn"
                        :disabled="leftCheckedKeys.length === 0"
                        @click="moveToSelected"
                        title="选择"
                      >
                        <i class="el-icon-arrow-right">选择</i>
                      </button>
                      <button 
                        class="transfer-btn"
                        :disabled="rightCheckedKeys.length === 0"
                        @click="moveToAvailable"
                        title="移除"
                      >
                        <i class="el-icon-arrow-left">移除</i>
                      </button>
                    </div>

                    <!-- 右侧面板 -->
                    <div class="transfer-panel">
                      <div class="panel-header">
                        <label class="checkbox-wrapper">
                          <input 
                            type="checkbox" 
                            :checked="rightCheckedAll"
                            @change="handleRightCheckAll"
                          />
                          <span class="checkmark"></span>
                          已选知识点 ({{ selectedPoints.length }})
                        </label>
                        <div class="search-box">
                          <i class="el-icon-search"></i>
                          <input 
                            type="text" 
                            v-model="rightSearch" 
                            placeholder="搜索知识点..."
                            class="search-input"
                          />
                        </div>
                      </div>
                      <div class="panel-body">
                        <div 
                          v-for="point in filteredSelectedPoints" 
                          :key="point.key"
                          class="transfer-item"
                          :class="{ 'checked': rightCheckedKeys.includes(point.key) }"
                        >
                          <label class="checkbox-wrapper">
                            <input 
                              type="checkbox" 
                              :value="point.key"
                              :checked="rightCheckedKeys.includes(point.key)"
                              @change="handleRightItemCheck(point.key, $event.target.checked)"
                            />
                            <span class="checkmark"></span>
                            {{ point.label }}
                          </label>
                        </div>
                        <div v-if="filteredSelectedPoints.length === 0" class="empty-text">
                          暂无数据
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-form-item>

            <el-form-item label="测试时长" prop="duration">
              <el-select 
                v-model="randomTestForm.duration" 
                placeholder="选择测试时长"
                class="duration-select"
              >
                <el-option label="不限时" :value="0"></el-option>
                <el-option label="30分钟" :value="30"></el-option>
                <el-option label="60分钟" :value="60"></el-option>
                <el-option label="90分钟" :value="90"></el-option>
                <el-option label="120分钟" :value="120"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item class="submit-section">
              <el-button 
                type="primary" 
                size="large" 
                @click="startRandomTest"
                :loading="randomTestLoading"
                class="start-test-btn"
              >
                <i class="el-icon-edit"></i>
                开始随机测试
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 试卷测试栏目 -->
      <div class="test-section">
        <div class="section-header">
          <h3 class="section-title">
            <i class="el-icon-document"></i>
            试卷测试
          </h3>
          <p class="section-desc">选择现有试卷进行完整测试</p>
        </div>

        <div class="paper-test-content">
          <div class="paper-filters">
            <el-select 
              v-model="paperFilter.courseId" 
              placeholder="筛选科目" 
              @change="filterPapers"
              clearable
              class="filter-select"
            >
              <el-option
                v-for="course in courses"
                :key="course.courseId"
                :label="course.course_name"
                :value="course.courseId">
              </el-option>
            </el-select>

            <el-input
              v-model="paperFilter.keyword"
              placeholder="搜索试卷名称"
              @input="filterPapers"
              clearable
              class="filter-input"
            >
              <template #prefix>
                <i class="el-icon-search"></i>
              </template>
            </el-input>
          </div>

          <div class="paper-list" v-loading="paperLoading">
            <div v-if="filteredPapers.length === 0 && !paperLoading" class="empty-papers">
              <el-empty description="暂无试卷数据" />
            </div>

            <div v-else class="papers-grid">
              <template v-for="paper in filteredPapers" :key="paper.paperId">
                <div
                  class="paper-card"
                  @click="selectPaper(paper)"
                  :class="{ 'selected': selectedPaper && selectedPaper.paperId === paper.paperId }"
                >
                  <div class="paper-header">
                    <h4 class="paper-title">{{ paper.paperName }}</h4>
                    <el-tag 
                      :type="getPaperTypeColor(paper.paperType)" 
                      size="small"
                    >
                      {{ paper.paperType || '综合测试' }}
                    </el-tag>
                  </div>

                  <div class="paper-info">
                    <div class="info-item">
                      <i class="el-icon-document-copy"></i>
                      <span>{{ paper.questionCount || 0 }}题</span>
                    </div>
                    <div class="info-item">
                      <i class="el-icon-time"></i>
                      <span>{{ paper.timeLimit || 120 }}分钟</span>
                    </div>
                    <div class="info-item">
                      <i class="el-icon-star-off"></i>
                      <span>{{ paper.totalScore || 100 }}分</span>
                    </div>
                  </div>

                  <div class="paper-description">
                    {{ paper.description || '暂无描述' }}
                  </div>

                  <div class="paper-meta">
                    <span class="create-time">创建时间: {{ formatDate(paper.createTime) }}</span>
                  </div>
                </div>

                <!-- 选中试卷的操作区域，紧跟在被选中的试卷后面 -->
                <div 
                  v-if="selectedPaper && selectedPaper.paperId === paper.paperId" 
                  class="selected-paper-actions"
                  style="grid-column: 1 / -1;"
                >
                  <div class="selected-paper-info">
                    <h4>已选择试卷：{{ selectedPaper.paperName }}</h4>
                    <p>{{ selectedPaper.description }}</p>
                  </div>
                  <el-button 
                    type="primary" 
                    size="large" 
                    @click="startPaperTest"
                    class="start-test-btn"
                  >
                    <i class="el-icon-edit"></i>
                    开始试卷测试
                  </el-button>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios'

export default {
  name: 'ExamPageHome',
  setup() {
    const router = useRouter()

    // 响应式数据
    const courses = ref([])
    const examPapers = ref([])
    const availableKnowledgePoints = ref([])
    const selectedPaper = ref(null)
    const randomTestLoading = ref(false)
    const paperLoading = ref(false)

    // 穿梭框相关数据
    const leftCheckedKeys = ref([])
    const rightCheckedKeys = ref([])
    const leftSearch = ref('')
    const rightSearch = ref('')

    // 随机测试表单
    const randomTestForm = reactive({
      courseId: null,
      questionCount: 20,
      selectionMode: 'all',
      selectedKnowledgePoints: [],
      duration: 60
    })

    // 表单验证规则
    const randomTestRules = {
      courseId: [
        { required: true, message: '请选择科目', trigger: 'change' }
      ],
      questionCount: [
        { required: true, message: '请选择题目数量', trigger: 'change' }
      ]
    }

    // 试卷筛选
    const paperFilter = reactive({
      courseId: null,
      keyword: ''
    })

    const randomTestFormRef = ref(null)

    // 穿梭框计算属性
    const availablePoints = computed(() => {
      return availableKnowledgePoints.value.filter(point => 
        !randomTestForm.selectedKnowledgePoints.includes(point.key)
      )
    })

    const selectedPoints = computed(() => {
      return availableKnowledgePoints.value.filter(point => 
        randomTestForm.selectedKnowledgePoints.includes(point.key)
      )
    })

    const filteredAvailablePoints = computed(() => {
      return availablePoints.value.filter(point => 
        point.label.toLowerCase().includes(leftSearch.value.toLowerCase())
      )
    })

    const filteredSelectedPoints = computed(() => {
      return selectedPoints.value.filter(point => 
        point.label.toLowerCase().includes(rightSearch.value.toLowerCase())
      )
    })

    const leftCheckedAll = computed({
      get: () => {
        return filteredAvailablePoints.value.length > 0 && 
               leftCheckedKeys.value.length === filteredAvailablePoints.value.length
      },
      set: (checked) => {
        if (checked) {
          leftCheckedKeys.value = filteredAvailablePoints.value.map(point => point.key)
        } else {
          leftCheckedKeys.value = []
        }
      }
    })

    const rightCheckedAll = computed({
      get: () => {
        return filteredSelectedPoints.value.length > 0 && 
               rightCheckedKeys.value.length === filteredSelectedPoints.value.length
      },
      set: (checked) => {
        if (checked) {
          rightCheckedKeys.value = filteredSelectedPoints.value.map(point => point.key)
        } else {
          rightCheckedKeys.value = []
        }
      }
    })

    // API 调用函数
    const api = {
      // 获取所有课程
      getCourses: () => {
        // 模拟数据，实际应该调用API
        return Promise.resolve({
          data: [
            { courseId: 1, course_name: '数据结构' },
            { courseId: 2, course_name: '操作系统' },
            { courseId: 3, course_name: '计算机组成系统' },
            { courseId: 4, course_name: '计算机网络' }
          ]
        })
      },

      // 获取试卷详情（包含题目数量等信息）
      getPaperById: (paperId) => 
        axios.get(`/exam-papers/${paperId}`),
      
      // 获取试卷题目列表
      getPaperQuestions: (paperId) => 
        axios.get(`/paperQuestion/byPaper?paper_id=${paperId}`),
      
      // 获取所有试卷
      getAllExamPapers: () => axios.get('/exam-papers/list/all'),
      
      // 根据课程ID获取知识点
      getKnowledgePointsByCourse: (courseId) => 
        axios.get(`/KnowledgePoint/course?courseId=${courseId}`),
      
      // 根据知识点生成随机测试
      generateRandomTest: (params) => 
        axios.post('/test/generate-random', params),
      
      // 获取试卷详情
      getPaperById: (paperId) => 
        axios.get(`/exam-papers/${paperId}`)
    }

    // 计算属性
    const filteredPapers = computed(() => {
      let filtered = examPapers.value

      // 按科目筛选
      if (paperFilter.courseId) {
        filtered = filtered.filter(paper => paper.courseId === paperFilter.courseId)
      }

      // 按关键词搜索
      if (paperFilter.keyword) {
        const keyword = paperFilter.keyword.toLowerCase()
        filtered = filtered.filter(paper => 
          paper.paperName.toLowerCase().includes(keyword) ||
          (paper.description && paper.description.toLowerCase().includes(keyword))
        )
      }

      return filtered
    })

    // 穿梭框方法
    const handleLeftCheckAll = (event) => {
      leftCheckedAll.value = event.target.checked
    }

    const handleRightCheckAll = (event) => {
      rightCheckedAll.value = event.target.checked
    }

    const handleLeftItemCheck = (key, checked) => {
      if (checked) {
        leftCheckedKeys.value.push(key)
      } else {
        leftCheckedKeys.value = leftCheckedKeys.value.filter(k => k !== key)
      }
    }

    const handleRightItemCheck = (key, checked) => {
      if (checked) {
        rightCheckedKeys.value.push(key)
      } else {
        rightCheckedKeys.value = rightCheckedKeys.value.filter(k => k !== key)
      }
    }

    const moveToSelected = () => {
      randomTestForm.selectedKnowledgePoints.push(...leftCheckedKeys.value)
      leftCheckedKeys.value = []
    }

    const moveToAvailable = () => {
      randomTestForm.selectedKnowledgePoints = 
        randomTestForm.selectedKnowledgePoints.filter(key => 
          !rightCheckedKeys.value.includes(key)
        )
      rightCheckedKeys.value = []
    }

    // 工具函数
    const formatDate = (dateString) => {
      if (!dateString) return '未知'
      return new Date(dateString).toLocaleDateString('zh-CN')
    }

    const getPaperTypeColor = (type) => {
      const typeColors = {
        '期中考试': 'warning',
        '期末考试': 'danger',
        '模拟考试': 'primary',
        '练习题': 'success'
      }
      return typeColors[type] || 'info'
    }

    // 数据加载
    const loadCourses = async () => {
      try {
        const response = await api.getCourses()
        courses.value = response.data
      } catch (error) {
        console.error('加载课程失败:', error)
        ElMessage.error('加载课程失败')
      }
    }

    const loadExamPapers = async () => {
      try {
        paperLoading.value = true
        const response = await api.getAllExamPapers()
        const papers = response.data?.data || response.data || []
    
        // 为每个试卷获取详细信息
        const papersWithDetails = await Promise.all(
          papers.map(async (paper) => {
            try {
              // 获取试卷题目列表来计算题目数量
              const questionsResponse = await api.getPaperQuestions(paper.paperId)
              const questions = questionsResponse.data || []
              
              return {
                ...paper,
                questionCount: questions.length,
                // 如果后端没有返回duration和totalScore，使用默认值
                duration: paper.timeLimit || 120,
                totalScore: paper.totalScore || 100
              }
            } catch (error) {
              console.warn(`获取试卷 ${paper.paperId} 详情失败:`, error)
              return {
                ...paper,
                questionCount: 0,
                duration: 120,
                totalScore: 100
              }
            }
          })
        )
        
        examPapers.value = papersWithDetails
      } catch (error) {
        console.error('加载试卷失败:', error)
        ElMessage.error('加载试卷失败')
      } finally {
        paperLoading.value = false
      }
    }

    const loadKnowledgePoints = async (courseId) => {
      try {
        const response = await api.getKnowledgePointsByCourse(courseId)
        const points = response.data?.data || response.data || []
        
        availableKnowledgePoints.value = points.map(point => ({
          key: point.pointId,
          label: point.pointName,
          disabled: false
        }))
      } catch (error) {
        console.error('加载知识点失败:', error)
        ElMessage.error('加载知识点失败')
        // 模拟数据用于演示
        availableKnowledgePoints.value = [
          { key: 1, label: '数据结构基础概念' },
          { key: 2, label: '线性表' },
          { key: 3, label: '栈和队列' },
          { key: 4, label: '字符串' },
          { key: 5, label: '数组和广义表' },
          { key: 6, label: '树和二叉树' },
          { key: 7, label: '图' },
          { key: 8, label: '动态存储管理' },
          { key: 9, label: '查找' },
          { key: 10, label: '内部排序' },
          { key: 11, label: '外部排序' },
          { key: 12, label: '文件' }
        ]
      }
    }

    // 交互操作
    const onCourseChange = (courseId) => {
      if (courseId && randomTestForm.selectionMode === 'custom') {
        loadKnowledgePoints(courseId)
      }
      randomTestForm.selectedKnowledgePoints = []
      leftCheckedKeys.value = []
      rightCheckedKeys.value = []
    }

    const onSelectionModeChange = (mode) => {
      if (mode === 'custom' && randomTestForm.courseId) {
        loadKnowledgePoints(randomTestForm.courseId)
      }
      randomTestForm.selectedKnowledgePoints = []
      leftCheckedKeys.value = []
      rightCheckedKeys.value = []
    }

    const filterPapers = () => {
      // 筛选逻辑已在计算属性中实现
    }

    const selectPaper = (paper) => {
      selectedPaper.value = selectedPaper.value?.paperId === paper.paperId ? null : paper
    }

    const startRandomTest = async () => {
      try {
        const valid = await randomTestFormRef.value.validate()
        if (!valid) return

        randomTestLoading.value = true

        // 构建测试参数
        const testParams = {
          courseId: randomTestForm.courseId,
          questionCount: randomTestForm.questionCount,
          duration: randomTestForm.duration,
          knowledgePoints: randomTestForm.selectionMode === 'all' 
            ? [] 
            : randomTestForm.selectedKnowledgePoints
        }

        // 跳转到测试页面
        router.push({
          name: 'ExamPageTesting',
          query: {
            type: 'random',
            courseId: testParams.courseId,
            questionCount: testParams.questionCount,
            duration: testParams.duration,
            knowledgePoints: JSON.stringify(testParams.knowledgePoints)
          }
        })

      } catch (error) {
        console.error('启动随机测试失败:', error)
        ElMessage.error('启动测试失败，请重试')
      } finally {
        randomTestLoading.value = false
      }
    }

    const startPaperTest = () => {
      if (!selectedPaper.value) {
        ElMessage.warning('请先选择试卷')
        return
      }

      // 跳转到测试页面
      router.push({
        name: 'ExamPageTesting',
        query: {
          type: 'paper',
          paperId: selectedPaper.value.paperId,
          paperName: selectedPaper.value.paperName
        }
      })
    }

    // 生命周期
    onMounted(async () => {
      await loadCourses()
      await loadExamPapers()
    })

    return {
      // 数据
      courses,
      examPapers,
      availableKnowledgePoints,
      selectedPaper,
      randomTestLoading,
      paperLoading,
      randomTestForm,
      randomTestRules,
      paperFilter,
      randomTestFormRef,
      // 穿梭框数据
      leftCheckedKeys,
      rightCheckedKeys,
      leftSearch,
      rightSearch,
      // 计算属性
      filteredPapers,
      availablePoints,
      selectedPoints,
      filteredAvailablePoints,
      filteredSelectedPoints,
      leftCheckedAll,
      rightCheckedAll,
      // 方法
      formatDate,
      getPaperTypeColor,
      onCourseChange,
      onSelectionModeChange,
      filterPapers,
      selectPaper,
      startRandomTest,
      startPaperTest,
      // 穿梭框方法
      handleLeftCheckAll,
      handleRightCheckAll,
      handleLeftItemCheck,
      handleRightItemCheck,
      moveToSelected,
      moveToAvailable
    }
  }
}
</script>

<style scoped>
.exam-home-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f0f7ff 0%, #c9e2ff 100%);
  padding: 20px;
}

.header-section {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  margin-bottom: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(212, 230, 247, 0.8);
  transition: all 0.3s ease;
}

.header-section:hover {
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
}

.header-content {
  padding: 22px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  position: relative;
}

.back-btn {
  color: #4a90e2;
  font-size: 15px;
  padding: 9px 18px;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-color: rgba(240, 248, 255, 0.8);
  border: 1px solid rgba(74, 144, 226, 0.2);
  font-weight: 500;
}

.back-btn:hover {
  background: rgba(74, 144, 226, 0.1);
  color: #3a7bc8;
  transform: translateX(-3px);
}

.page-title {
  margin: 0;
  color: #2c5282;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: 0.5px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: 1400px;
  margin: 0 auto;
}

.test-section {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 12px 45px rgba(0, 0, 0, 0.1);
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
  border: 1px solid rgba(212, 230, 247, 0.8);
  position: relative;
  overflow: hidden;
}

.test-section:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.test-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4a90e2 0%, #63b3ed 100%);
}

.test-section::after {
  content: "✨";
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 24px;
  opacity: 0.15;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.section-header {
  margin-bottom: 36px;
  text-align: center;
  position: relative;
}

.section-title {
  color: #2c5282;
  font-size: 26px;
  font-weight: 650;
  margin: 0 0 12px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 20px;
  position: relative;
}

.section-title::before,
.section-title::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(74, 144, 226, 0.4));
}

.section-title::before {
  left: -30px;
}

.section-title::after {
  right: -30px;
  background: linear-gradient(90deg, rgba(74, 144, 226, 0.4), transparent);
}

.section-title i {
  color: #4a90e2;
  font-size: 28px;
}

.section-desc {
  color: #5a6c84;
  font-size: 16px;
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.3px;
}

.test-form {
  max-width: 850px;
  margin: 0 auto;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin-bottom: 24px;
}

.full-width {
  width: 100%;
}

.knowledge-selection {
  width: 100%;
  background: rgba(240, 248, 255, 0.5);
  border-radius: 12px;
  padding: 20px;
  border: 1px dashed rgba(74, 144, 226, 0.3);
}

.selection-mode {
  margin-bottom: 24px;
}

.custom-knowledge-selection {
  margin-top: 20px;
}

.custom-transfer {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: 100%;
  max-width: 100%;
}

.transfer-panel {
  flex: 1;
  border: 2px solid rgba(212, 230, 247, 0.8);
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 380px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.transfer-panel:hover {
  border-color: rgba(74, 144, 226, 0.5);
}

.panel-header {
  padding: 18px;
  border-bottom: 1px solid rgba(212, 230, 247, 0.8);
  background: linear-gradient(135deg, rgba(240, 248, 255, 0.8) 0%, rgba(212, 230, 247, 0.6) 100%);
  border-radius: 12px 12px 0 0;
  font-weight: 500;
  color: #2c5282;
}

.search-box {
  position: relative;
  margin-top: 15px;
}

.search-box i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #7f9eb5;
  font-size: 15px;
}

.search-input {
  width: 100%;
  padding: 10px 15px 10px 40px;
  border: 1px solid rgba(212, 230, 247, 0.8);
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: all 0.3s ease;
  background-color: rgba(248, 251, 255, 0.8);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.search-input:focus {
  border-color: #4a90e2;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  max-height: 320px;
  padding: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(74, 144, 226, 0.5) transparent;
}

.panel-body::-webkit-scrollbar {
  width: 6px;
}

.panel-body::-webkit-scrollbar-thumb {
  background-color: rgba(74, 144, 226, 0.5);
  border-radius: 3px;
}

.transfer-item {
  padding: 10px 15px;
  border-radius: 8px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  margin-bottom: 4px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.transfer-item:hover {
  background: rgba(240, 248, 255, 0.8);
  transform: translateX(3px);
}

.transfer-item.checked {
  background: rgba(74, 144, 226, 0.1);
  border-left: 3px solid #4a90e2;
}

.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 15px;
  color: #4a5568;
  position: relative;
  z-index: 1;
}

.checkbox-wrapper input[type="checkbox"] {
  display: none;
}

.checkmark {
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e0;
  border-radius: 4px;
  position: relative;
  transition: all 0.3s ease;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkmark {
  background: #4a90e2;
  border-color: #4a90e2;
  animation: checkmarkPop 0.3s ease;
}

@keyframes checkmarkPop {
  0% { transform: scale(0.8); opacity: 0.5; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkmark::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -1px;
}

.transfer-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 24px 0;
}

.transfer-btn {
  width: 80px;
  height: 55px;
  border: 2px solid rgba(212, 230, 247, 0.8);
  background: #ffffff;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  font-size: 16px;
  color: #4a5568;
  font-weight: 500;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

.transfer-btn:hover:not(:disabled) {
  border-color: #4a90e2;
  color: #4a90e2;
  background: rgba(74, 144, 226, 0.05);
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(74, 144, 226, 0.15);
}

.transfer-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f7fafc;
}

.empty-text {
  text-align: center;
  color: #a0aec0;
  padding: 50px 20px;
  font-size: 15px;
}

.duration-select {
  width: 220px;
}

.submit-section {
  text-align: center;
  margin-top: 40px;
}

.start-test-btn {
  padding: 14px 50px;
  font-size: 17px;
  border-radius: 30px;
  background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
  border: none;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 20px rgba(74, 144, 226, 0.3);
}

.start-test-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(74, 144, 226, 0.4);
}

.start-test-btn:active {
  transform: translateY(1px);
}

.start-test-btn::after {
  content: "🌟";
  position: absolute;
  right: 15px;
  opacity: 0;
  transition: all 0.4s ease;
}

.start-test-btn:hover::after {
  opacity: 1;
  right: 25px;
}

.start-test-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.start-test-btn:hover::before {
  left: 100%;
}

.paper-test-content {
  max-width: 1300px;
  margin: 0 auto;
}

.paper-filters {
  display: flex;
  gap: 24px;
  margin-bottom: 36px;
  justify-content: center;
}

.filter-select {
  width: 220px;
}

.filter-input {
  width: 350px;
}

.papers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 30px;
  margin-bottom: 40px;
}

.paper-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

.paper-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  border-color: rgba(74, 144, 226, 0.5);
}

.paper-card.selected {
  border-color: #4a90e2;
  background: linear-gradient(135deg, rgba(74, 144, 226, 0.05) 0%, rgba(99, 179, 237, 0.05) 100%);
  animation: cardSelect 0.6s ease;
}

@keyframes cardSelect {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.paper-card::before {
  content: "📝";
  position: absolute;
  top: -12px;
  left: -12px;
  font-size: 28px;
  opacity: 0.15;
}

.paper-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #4a90e2 0%, #63b3ed 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.paper-card:hover::after {
  transform: scaleX(1);
}

.paper-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}

.paper-title {
  color: #2c5282;
  font-size: 20px;
  font-weight: 650;
  margin: 0;
  flex: 1;
  margin-right: 15px;
  line-height: 1.4;
}

.paper-info {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  color: #5a6c84;
  font-size: 15px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(240, 248, 255, 0.6);
  padding: 5px 10px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.info-item:hover {
  background: rgba(74, 144, 226, 0.1);
  color: #4a90e2;
}

.paper-description {
  color: #4a5568;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 18px;
  min-height: 45px;
  position: relative;
  z-index: 1;
}

.paper-meta {
  color: #7f9eb5;
  font-size: 13px;
  border-top: 1px solid rgba(212, 230, 247, 0.8);
  padding-top: 12px;
  position: relative;
  z-index: 1;
}

.selected-paper-actions {
  background: linear-gradient(135deg, #4a90e2 0%, #63b3ed 100%);
  color: white;
  padding: 30px;
  border-radius: 18px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(74, 144, 226, 0.4);
  transition: all 0.4s ease;
}

.selected-paper-actions:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(74, 144, 226, 0.5);
}

.selected-paper-actions::after {
  content: "🎯";
  position: absolute;
  right: 25px;
  bottom: 15px;
  font-size: 50px;
  opacity: 0.15;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.selected-paper-actions::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  transform: rotate(45deg);
  animation: shine 4s infinite;
}

@keyframes shine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

.selected-paper-info h4 {
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: 600;
}

.selected-paper-info p {
  margin: 0 0 25px 0;
  opacity: 0.9;
  font-size: 15px;
  line-height: 1.6;
}

.empty-papers {
  text-align: center;
  padding: 60px;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .papers-grid {
    grid-template-columns: 1fr;
  }
  
  .paper-filters {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
  
  .filter-select,
  .filter-input {
    width: 100%;
    max-width: 350px;
  }
  
  .custom-transfer {
    flex-direction: column;
    gap: 18px;
  }
  
  .transfer-panel {
    width: 100%;
  }
  
  .transfer-buttons {
    flex-direction: row;
    justify-content: center;
    padding: 12px 0;
  }
  
  .transfer-btn {
    transform: rotate(90deg);
  }
  
  .section-title::before,
  .section-title::after {
    width: 20px;
  }
  
  .section-title::before {
    left: -15px;
  }
  
  .section-title::after {
    right: -15px;
  }
}
</style>